<template>
  <div class="box mt-5 border-t intro-y">
    <div class="flex items-center px-5 py-5 sm:py-3 border-b border-slate-200/60 dark:border-darkmode-400">
      <h2 class="font-medium text-base mr-auto">{{ title }}</h2>
      <ul
          class="nav w-52 nav-pills border border-slate-300 dark:border-darkmode-300 border-dashed rounded-md p-1"
          role="tablist"
      >
        <li class="nav-item flex-1">
          <button
              :class="[{'active': activeIndex === 1}, 'nav-link', 'w-full', 'py-1.5', 'px-2']"
              type="button"
              @click="changeTab(1)"
          >
            图形
          </button>
        </li>
        <li class="nav-item flex-1">
          <button
              :class="[{'active': activeIndex === 2}, 'nav-link', 'w-full', 'py-1.5', 'px-2']"
              type="button"
              @click="changeTab(2)"
          >
            数据
          </button>
        </li>
      </ul>
    </div>
    <div class="p-3">
      <wTable :tableData="tableData" v-show="activeIndex === 2"/>
      <chart :tableData="tableData" v-show="activeIndex === 1" :activeIndex="activeIndex" :powerTypes="powerTypes"
             :seriesType="seriesType"/>
    </div>
  </div>
</template>

<script setup>
import wTable from "./wTable.vue"
import chart from "./chart.vue"
import {ref} from 'vue';

// 接收 props 和 emits
defineProps({
  title: String,
  tableData: Array,
  powerTypes: {
    type: Array,
    default: () => []
  },
  seriesType: {
    type: String,
    default: 'line'
  }
});
const emit = defineEmits(['tabChange']);

// 状态
const activeIndex = ref(1);

// 切换 tab
const changeTab = (index) => {
  activeIndex.value = index;
  emit('tabChange', index);
};
</script>
